import React, { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import img2 from '../assets/images/编组 3@2x.png'
import { Button, message, Form, Input } from 'antd';
import '../assets/style/common/register.scss'
import { registerApi,regYzmApi} from '../apis/modules/user';



export default function Login() {
  const [way, setWay] = React.useState('password')
  const navigate = useNavigate()
  const myRef = useRef()
  

const getRegYam = ()=>{
  const val = myRef.current.input.value
  // console.log('------',val);
  regYzmApi(val)
  .then((res) => {
    message.success(res.message || "发送成功")
    // console.log(res);
  }
  
  )
}

  const onFinish2 = (values) => {
    console.log('values:', values);
    registerApi(values)
    .then((res)=>{
      console.log(res);
    })
   
  };

  const onFinishFailed2 = (errorInfo) => {
    console.log('Failed:', errorInfo);

  };

  

  return (
    <div className='login-bg'>
      <img src={img2} alt="" />
      <button className='close'>关闭</button>
      <div className='login_box'>
        <div className='pp'>
          <div className='login_way' >
            <span className={way === "note" ? 'login_way_color ' : ""}>账号注册<div className={way == 'note' ? 'actives' : ''}></div></span>
          </div>
          {/* 短信登录 */}
          <div className={way === 'note' ? 'password_pages' : ''}>
            <Form className='froms'
              name="basic"
              labelCol={{
                span: 8,
              }}

              wrapperCol={{
                span: 16,
              }}

              initialValues={{
                remember: true,
              }}
              onFinish={onFinish2}
              onFinishFailed={onFinishFailed2}
              autoComplete="off"
            >
              <div className="contents">
                <Form.Item className='userName inputs'
              
                  name="phone"
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号/用户名',
                    },
                  ]}
                >
                  <Input placeholder='请输入手机号/用户名' maxLength={11}   ref={myRef}/>
                </Form.Item>
                <Form.Item className='yzmPhone'
                  name="code"
                // rules={[
                //   {
                //     required: true,
                //     message: '请输入验证码',
                //   },
                // ]}
                >
                  <Input placeholder='请输入验证码' />
                </Form.Item>
                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                  className='btnStyle2'
                >
                  <div className='line'></div>
                  <Button htmlType="submit" className='btnss' style={{ color: '#FFFFFF', marginBottom: "0px" }}>
                    注册
                  </Button>
                </Form.Item>

              
              </div>
            </Form>
          </div>
        </div>
        <div >
            <Button className='getPhoneYzm'  onClick={getRegYam} style={{ color: '#FFFFFF', marginBottom: "0px" }}>获取验证码</Button>
        </div>
      </div>
    </div>
  )
}
